<template>
  <div class="venus-list-page">
    <!--自定义资产模板界面-->
    <div class="page-search">
      <el-row type="flex" class="search-list">
        <el-row type="flex" class="list-items">
          <div class="venus-input-box">
            <label>资产代码</label>
            <el-select
              v-model="table.shibor_detail_table.ftool_code"
              class="venus-input-middle"
              placeholder="--请选择资产代码--"
            >
              <el-option
                v-for="(item) in dict.ftoolCodeItems"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="venus-input-box">
            <label>资产名称</label>
            <el-input
              v-model="table.shibor_detail_table.ftool_name"
              class="venus-input-middle"
              placeholder="请输入资产名称"
            />
          </div>
          <div class="venus-input-box">
            <label>存款类别</label>
            <el-select
              v-model="table.shibor_detail_table.t8_sys_adtype_id"
              class="venus-input-middle"
              placeholder="--请选择存款类别--"
            >
              <el-option
                v-for="(item) in dict.adtypeIdItems"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-row>
        <div class="venus-btn-box">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="primary" @click="resetForm">重置</el-button>
        </div>
      </el-row>
    </div>
    <!--    查询列表返显-->
    <div class="page-list">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">查询结果</div>
      </el-row>
      <table-pagination
        :dict-data="dict"
        :table-data="table.shibor_detail_table.tableData"
        :table-header-config="table.shiborDetailConfig"
        highlight-current-row
        :total="table.shibor_detail_table.total"
        :page-size="table.shibor_detail_table.limit"
        :now-page="table.shibor_detail_table.nowPage"
        @current-change="currentChange"
        @table-current-change="showInfo"
        :operation-config="table.operationConfig"
      />
    </div>
    <div class="page-list">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">查询结果详情</div>
      </el-row>
      <table-pagination
        :dict-data="dict"
        :table-data="table.shibor_detail_info_table.tableData"
        :table-header-config="table.shiborDetailInfoConfig"
        highlight-current-row
        :total="table.shibor_detail_info_table.total"
        :page-size="table.shibor_detail_info_table.limit"
        @current-change="currentChangeSub"
        :now-page="table.shibor_detail_info_table.nowPage"
        :operation-config="table.shibor_detail_info_table"

      />
    </div>
    <!--新增弹出框-->
    <el-dialog :title="dialog.zq.title" :visible.sync="dialog.zq.formVisible" v-dialogDrag>
      <!-- ref=dlgForm用于验证表单 -->
      <el-form ref="dlgFormZq" :model="dialog.form" size="mini">
        <el-row>
          <!--资产代码-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="资产代码"
              :label-width="dialog.formLabelWidth"
              prop="ftool_code"
              :rules="dialog.formRules.ftool_code"
            >
              <el-input v-model="dialog.form.ftool_code" disabled/>
            </el-form-item>
          </el-col>
          <!--资产名称-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="资产名称"
              :label-width="dialog.formLabelWidth"
              prop="ftool_name"
              :rules="dialog.formRules.ftool_name"
            >
              <el-input v-model="dialog.form.ftool_name" disabled/>
            </el-form-item>
          </el-col>
          <!--展期起息日-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="展期起息日"
              :label-width="dialog.formLabelWidth"
              prop="begindate"
              :rules="dialog.formRules.begindate"
            >
              <el-date-picker
                v-model="dialog.form.begindate"
                type="date"
                class="venus-input-middle venus-input-date"
                placeholder="请选择展期起息日"
                value-format="yyyyMMdd"
                disabled
              />
            </el-form-item>
          </el-col>
          <!--展期到期日-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="展期到期日"
              :label-width="dialog.formLabelWidth"
              prop="enddate"
              :rules="dialog.formRules.enddate"
            >
              <el-date-picker
                v-model="dialog.form.enddate"
                type="date"
                class="venus-input-middle venus-input-date"
                placeholder="请选择展期到期日"
                value-format="yyyyMMdd"
              />
            </el-form-item>
          </el-col>
          <!--展期收益率(％)-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="展期收益率(％)"
              :label-width="dialog.formLabelWidth"
              prop="yield"
              :rules="dialog.formRules.yield"
            >
              <el-input v-model="dialog.form.yield"/>
            </el-form-item>
          </el-col>
          <!--展期付息频率-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="展期付息频率"
              :label-width="dialog.formLabelWidth"
              prop="new_pay_freq"
              :rules="dialog.formRules.new_pay_freq"
            >
              <el-select
                v-model="dialog.form.new_pay_freq"
                placeholder="请选择展期付息频率"
                filterable
                clearable
              >
                <el-option
                  v-for="(text,key) in dict.pay_freq"
                  :key="key"
                  :label="text"
                  :value="key"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!--备注-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="备注"
              :label-width="dialog.formLabelWidth"
              prop="note"
            >
              <el-input v-model="dialog.form.note"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="success" @click="commit">提 交</el-button>
        <el-button type="info" plain @click="dialog.zq.formVisible=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as kk from '../../../../../../utils/k-utils'
  import request from '../../../../../../utils/request'

  export default {
    name: 'M824B03',
    data() { // 数据定义
      return {
        dict: {
          /*查询框字典字典*/
          ftoolCodeItems: {}, //资产代码
          adtypeIdItems: [
            {value: '5', text: '同业存放'},
            {value: '29', text: '同业借款'},
          ], // 存款类别
          /*表格字典*/
          t8_sys_adtype_id: {
            5: '同业存放',
            29: '同业借款'
          }, // 存款类别
          pay_freq: {},
        },
        /* 表格部分数据 */
        table: {
          shiborDetailConfig: [ // 表头配置
            {prop: 'ftool_code', label: '资产代码'},
            {prop: 'ftool_name', label: '资产名称'},
            {prop: 't8_sys_adtype_id', label: '存款类别'},
            {prop: 'begindate', label: '起息日'},
            {prop: 'enddate', label: '到期日'},
            {prop: 'yield', label: '收益率（%）'},
            {prop: 'pay_freq', label: '付息频率'}
          ],
          shiborDetailInfoConfig: [ // 表头配置
            {prop: 'begin_date', label: '展期起始日'},
            {prop: 'end_date', label: '展期结束日'},
            {prop: 'rate', label: '展期收益率'},
            {prop: 'pay_freq', label: '展期付息频率'}
          ],
          operationConfig: { // 表格操作配置
            fixed: 'right',
            width: 200,
            operationButton: [
              // 每一个操作。value:操作文字；func:回调函数
              {value: '展期', func: this.myZq}
            ]
          },
          shibor_detail_table: { //表格数据
            total: 0,
            nowPage: 1,
            limit: 5,
            tableData: [], // 表格数据
            exeid: 'SHIBOR_PROPERTIES_EQ005',//exeid
            ftool_code: '', // 行内资产编码
            ftool_name: '', // 资管计划名称
            t8_sys_adtype_id: ''// 存款类别
          },
          shibor_detail_info_table: { //表格数据
            total: 0,
            nowPage: 1,
            limit: 5,
            tableData: [], // 表格数据
            exeid: 'SHIBOR_PROPERTIES_EQ006',//exeid
          }
        },
        /* ===========展期=============== */
        dialog: {
          formLabelWidth: '100px',
          formRules: {
            ftool_code: [
              {required: true, message: '请输入资产代码', trigger: 'blur'}
            ],
            ftool_name: [
              {required: true, message: '请输入资产名称', trigger: 'blur'}
            ],
            begindate: [
              {required: true, message: '请选择展期起息日', trigger: 'change'}
            ],
            enddate: [
              {required: true, message: '请选择展期到期日', trigger: 'change'}
            ],
            new_pay_freq: [
              {required: true, message: '请选择展期付息频率', trigger: 'change'}
            ],
            note: [
              {required: true, message: '请输入展期收益率', trigger: 'blur'}
            ],
          },
          form: {
            ftool_code: '', // 资产代码
            ftool_name: '', // 资产名称
            begindate: '', // 展期起息日
            enddate: '', // 展期到期日
            new_pay_freq: '', // 展期付息频率
            yield: '', // 展期收益率(％)
            note: '', // 备注
          },
          zq: {
            title: '同业展期',
            formVisible: false
          }
        }
      }
    },
    mounted() {
      // 初始化调用
      this.init()
    },
    methods: {
      // 页面初始化
      init: function () {
        kk.k_load_dict(this, 'pay_freq', 't8_pay_freq');
        this.load_dict_exeid(this, 'shibor', 'SHIBOR_PROPERTIES_EQ004', 'ftoolCodeItems')
        this.table.shibor_detail_table.nowPage = 1 // 初始第一页
        kk.k_load_table(this, 'shibor_detail_table', 'shibor')
      },
      // 事件触发
      search() { // 查询函数
        this.table.shibor_detail_table.nowPage = 1 // 初始第一页
        kk.k_load_table(this, 'shibor_detail_table', 'shibor')
      },
      // 级联显示详情
      showInfo(params) {
        this.table.shibor_detail_info_table.nowPage = 1 // 初始第一页
        this.table.shibor_detail_info_table.t8_assdept_inf_id = params.id
        kk.k_load_table(this, 'shibor_detail_info_table', 'shibor')
      },
      // ======================表格======================
      myZq(item, index) {
        // 赋值
        this.copyObj(item, this.dialog.form)
        this.dialog.form.new_pay_freq = item.pay_freq
        this.dialog.zq.formVisible = true
      },
      resetForm(item, index) {
        this.table.shibor_detail_table.ftool_code = '',
          this.table.shibor_detail_table.ftool_name = '',
          this.table.shibor_detail_table.t8_sys_adtype_id = ''
      },
      commit(item, index) {
        var _this = this
        this.$refs.dlgFormEdit.validate((valid) => {
          if (valid) {
            _this.commitOkHandler()
          } else {
            console.log('表单数据检验没有全部通过！！')
          }
        })
      },
      /* 通过exeid加载字典 */
      load_dict_exeid(this_object, service_name, exeid, dict) {
        request({
          loading: true,
          url: service_name + '/base/comn-query.json?exeid=' + exeid,
          method: 'post'
        }).then(rep => {
          this_object['dict'][dict] = rep.rows
        })
      },
      copyObj(obj1, obj2) {
        for (var key in obj1) {
          // 原型对象不拷贝
          if (key === '__proto__') {
            continue
          }
          // 不存在的属性不拷贝
          if (!obj2.hasOwnProperty(key)) {
            continue
          }
          // 自动将number转换成string
          if (typeof obj1[key] === 'number') {
            obj1[key] = '' + obj1[key]
          }
          obj2[key] = obj1[key]
        }
      },
      commitOkHandler() {

      },
      //下一页触发的事件
      currentChange(index){
        this.table.shibor_detail_table.nowPage = index;
        kk.k_load_table(this,'shibor_detail_table','shibor');
      },
      currentChangeSub(index){
        this.table.shibor_detail_info_table.nowPage = index;
        kk.k_load_table(this,'shibor_detail_info_table','shibor');
      },
    }
  }
</script>

<style scoped>
</style>
